<html>
<head>
    <title>Async JavaScript function test page</title>
    <style>
        .pass {
            background-color: green;
        }

        .fail {
            background-color: red;
        }
    </style>
    <script>
        responseText = "";

        async function loadFromURL(url) {
            let result = await new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.addEventListener("load", function () {
                    if (this.status >= 200 && this.status <= 299)
                        resolve(this.responseText);
                    else
                        reject();
                });
                xhr.addEventListener("error", () => reject());
                xhr.send();
            });
            responseText = result;
            document.getElementById("response-text").innerText = responseText;
        }

        async function testURL(url) {
            responseText = "";
            let shouldBeEmpty = false;
            try {
                await loadFromURL(url);
            } catch {
                shouldBeEmpty = true;
            }

            if ((responseText !== "") ^ shouldBeEmpty)
                document.getElementById("result").innerHTML = "<p class=pass>PASS!</p>";
            else
                document.getElementById("result").innerHTML = "<p class=fail>FAIL!</p>";
        }
    </script>
</head>
<body>
<input id="url" type="text" value="http://man.serenityos.org/man4/zero.html">
<a href="javascript:testURL(document.getElementById('url').value)">Click me for fun</a>
<br>
<div id="result"></div>
<pre id="response-text"></pre>
</body>
</html>
